import { Layout, Form, Image, Tag, Row, Col, Button, Modal } from 'myselfantd';
import React, { useEffect, useState } from 'react';
import Static from './Static';
import Dynamic from './Dynamic';
import { getInfoById } from '../api';
import Base from './Base';
interface FormProps {
  data?: any;
  viewmode?: 'view' | 'add' | 'edit';
  onFinish: (...params: any) => void;
}
const App: React.FC<FormProps> = ({ data, onFinish}) => {
  const [key, setKey] = useState('0');
  const [contentData, setContentData] = useState<any>({});
  const [curState, setCurState] = useState([false, ''] as [boolean, string]);
  const initData = async () => {
    if (data.id) {
      let { result } = await getInfoById(data.id);
      setContentData(result);
    }
  };
  useEffect(() => {
    initData();
  }, [data.id]);
  return (
    <>
      <div style={{ height: '300px' }}>
        <div style={{ margin: '24px' }}>
          <span style={{ fontSize: '20px', fontWeight: 'bold', color: '#1D1D1F' }}>农具名称</span>
          <Tag color="blue" noborder={1} style={{ marginLeft: '20px' }}>
            {contentData.name}
          </Tag>
          <Tag color="blue" noborder={1}>
            品牌：{contentData.producer}
          </Tag>
          <Button.Image
            size="large"
            style={{ position: 'absolute', right: '30px', top: '85px' }}
            type="primary"
            onClick={() => setCurState([true, contentData.id])}
            icon={'add'}
          >
            编辑
          </Button.Image>
        </div>
        <Row>
          <Col span={18}>
            <Form.Layout
              data={contentData}
              viewmode="view"
              formItemData={[
                [
                  {
                    name: 'name',
                    label: '农具名称',
                  },
                  {
                    name: 'code',
                    label: '出厂编号',
                  },
                  {
                    name: 'widthOfCloth',
                    label: '作业幅宽',
                  },
                ],
                [
                  {
                    name: 'deviceSpuId',
                    label: '所属品类',
                  },
                  {
                    name: 'belongingSystem',
                    label: '所属系统',
                  },
                  {},
                ],
                [
                  {
                    name: 'note',
                    label: '说 明',
                  },
                ],
              ]}
            />
          </Col>
          <Col span={6}>
            <Image src={`${UPLOAD_IMG_URL_NEW}/hxdfs/${contentData.image}`}/>
          </Col>
        </Row>
      </div>
      {contentData.staticAttributeList && (
        <Layout.TabsTemplate height={0} targetKey={key} keyChnage={(key: any) => setKey(key)}>
          <Static title="静态参数" data={contentData?.staticAttributeList} />
          <Dynamic title="动态参数" data={contentData?.dynamicAttributeList} id={contentData?.id} onFinish={onFinish}/>
        </Layout.TabsTemplate>
      )}
      {curState[0] && (
        <Modal.Dialog
          title="编辑农具"
          showDialog={curState[0]}
          changeDialog={(val: boolean) => setCurState([val, ''])}
        >
          <Base id={curState[1]} viewmode="edit" close={() => setCurState([false, ''])} onFinish={onFinish}/>
        </Modal.Dialog>
      )}
    </>
  );
};

export default App;
